<div #diagramcontainer style="height: 800px" nz-row>
  <div nz-col #ref class="diagram-container" nzLg="18" nzMd="18" nzSm="18" style="padding: 0.1rem"></div>
  <div nz-col nzSm="6" style="padding: 0.1rem">
    <nz-card nzTitle="对象属性">
      <form nz-form se-container="1" labelWidth="100" gutter="32">
        <se label="Id" error="Id" >
          <input
            nz-input
            placeholder=""
            [(ngModel)]="form.id"
            readonly="readonly"
            [ngModelOptions]="{ standalone: true }"
            (ngModelChange)="ngModelChange($event)"
          />
        </se>
        <se label="对象Id" error="对象Id" >
          <input
            nz-input
            placeholder=""
            [(ngModel)]="form.flowid"
            readonly="readonly"
            [ngModelOptions]="{ standalone: true }"
            (ngModelChange)="ngModelChange($event)"
          />
        </se>

        <se label="对象名称" error="对象名称" required>
          <input
            nz-input
            placeholder=""
            [(ngModel)]="form.flowname"
            readonly="readonly"
            [ngModelOptions]="{ standalone: true }"
            (ngModelChange)="ngModelChange($event)"
          />
        </se>

        <se label="备注" error="备注">
          <input
            nz-input
            placeholder=""
            [(ngModel)]="form.flowdesc"
            name="flowdesc"
            [ngModelOptions]="{ standalone: true }"
            (ngModelChange)="ngModelChange($event)"
          />
        </se>

        <!-- <se label="网关处理器" error="网关处理器" *ngIf="form.nodeProcessClassVisable">
          <input
            nz-input
            [(ngModel)]="form.nodeProcessClass"
            placeholder="网关处理器"
            [ngModelOptions]="{ standalone: true }"
            (ngModelChange)="ngModelChange($event)"
          />
        </se> -->

        <se label="条件表达式" error="条件表达式" *ngIf="form.conditionexpressionVisable">
          <textarea
            nz-input
            [(ngModel)]="form.conditionexpression"
            placeholder="条件表达式"
            [ngModelOptions]="{ standalone: true }"
            (ngModelChange)="ngModelChange($event)"
          ></textarea>
        </se>

        <se label="脚本类型" error="脚本类型" *ngIf="form.flowscripttypeVisable">
          <nz-select
            [(ngModel)]="form.flowscripttype"
            [ngModelOptions]="{ standalone: true }"
            (ngModelChange)="flowscripttypeChange($event)"
          >
            <nz-option nzValue="javascript" nzLabel="javascript"></nz-option>
            <nz-option nzValue="executor" nzLabel="executor"></nz-option>
            <nz-option nzValue="python" nzLabel="python"></nz-option>
            <nz-option nzValue="sql" nzLabel="sql"></nz-option>
            <nz-option nzValue="lua" nzLabel="lua"></nz-option>
            <nz-option nzValue="json" nzLabel="json"[nzDisabled]="true"></nz-option>
            <nz-option nzValue="bat" nzLabel="bat" [nzDisabled]="true"></nz-option>
            <nz-option nzValue="xml" nzLabel="xml" [nzDisabled]="true"></nz-option>

          </nz-select>
        </se>
        <se label="执行器" error="请选择执行器" *ngIf="form.nodeProcessClassVisable">
          <nz-select
          [(ngModel)]="form.nodeProcessClass"
          [ngModelOptions]="{ standalone: true }"
          (ngModelChange)="ngModelChange($event)"
        >

        <nz-option *ngFor="let option of executors" [nzLabel]="option.label" [nzValue]="option.value"></nz-option>
   

        </nz-select>
        </se>


        <se label="执行器参数(JSON)" error="请选择执行器" *ngIf="form.nodeProcessClassVisable">
       
          <nz-code-editor
          (ngModelChange)="ngModelChange($event)"
          style="width: 100%; height: 500px; padding-top: 1rem"
          class="editor"
          [(ngModel)]="form.nodeProcessParams"
          [ngModelOptions]="{ standalone: true }"
          [nzEditorOption]="{ theme: 'vs-dark',language: 'json' }"
        ></nz-code-editor>
   
        </se>

        <se label="脚本" error="类型" *ngIf="form.flowscriptVisable">
          <nz-code-editor
            (ngModelChange)="ngModelChange($event)"
            style="width: 100%; height: 500px; padding-top: 1rem"
            class="editor"
            [(ngModel)]="form.flowscript"
            [ngModelOptions]="{ standalone: true }"
            [nzEditorOption]="{ theme: 'vs-dark',language: 'json' }"
          ></nz-code-editor>
        </se>
      </form>
    </nz-card>
    <ng-template #extraTemplate>
      <a>More</a>
    </ng-template>
  </div>

  <!-- <nz-collapse>
        <nz-collapse-panel [nzHeader]="nzHeader" nzExpandIconPosition="right" nzActive="false"> -->

  <!-- </nz-collapse-panel>
      </nz-collapse> -->
</div>
